<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>6666玩五子棋不叫我</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: #000;
            color: white;
            font-family: 'Microsoft YaHei', sans-serif;
            overflow: hidden;
        }
        h1 {
            font-size: 36px;
            font-weight: bold;
            color: #ff5722;
            text-align: center;
            margin: 20px 0;
            text-shadow: 0 0 10px #ffeb3b, 0 0 20px #ff5722;
            animation: titleGlow 2s infinite alternate;
        }
        @keyframes titleGlow {
            from { text-shadow: 0 0 10px #ffeb3b, 0 0 20px #ff5722; }
            to { text-shadow: 0 0 20px #ffeb3b, 0 0 40px #ff5722; }
        }
        #gameContainer {
            position: relative;
            margin-top: 20px;
            z-index: 1;
        }
        #board {
            background: rgba(220, 179, 92, 0.8);
            border: 4px solid #8d6e3a;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
        }
        #status {
            font-size: 1.2em;
            margin: 10px 0;
            padding: 10px;
            border-radius: 5px;
            text-align: center;
            background: rgba(0, 0, 0, 0.7);
        }
        .player-turn {
            color: #4CAF50;
        }
        .yanghua-turn {
            color: #F44336;
        }
        .game-over {
            color: #FFC107;
            font-weight: bold;
        }
        #controls {
            margin-top: 10px;
            z-index: 1;
        }
        button {
            background: #4CAF50;
            border: none;
            color: white;
            padding: 10px 20px;
            margin: 0 10px;
            font-size: 16px;
            cursor: pointer;
            border-radius: 4px;
            transition: all 0.3s;
        }
        button:hover {
            background: #45a049;
            transform: scale(1.05);
        }
        #birthdayEffect {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            flex-direction: column;
            pointer-events: none;
        }
        #birthdayText {
            font-size: 72px;
            font-weight: bold;
            color: #ffeb3b;
            text-shadow: 0 0 10px #ff5722;
            animation: pulse 1s infinite alternate, rainbow 3s infinite;
            position: relative;
            z-index: 1001;
        }
        @keyframes pulse {
            from { transform: scale(1); }
            to { transform: scale(1.1); }
        }
        @keyframes rainbow {
            0% { color: #ff0000; }
            14% { color: #ff7f00; }
            28% { color: #ffff00; }
            42% { color: #00ff00; }
            57% { color: #0000ff; }
            71% { color: #4b0082; }
            85% { color: #9400d3; }
            100% { color: #ff0000; }
        }
        #birthdayCake {
            position: absolute;
            bottom: 50px;
            width: 200px;
            height: 150px;
            z-index: 1001;
        }
        .cake-bottom {
            position: absolute;
            bottom: 0;
            width: 200px;
            height: 80px;
            background: #f5c6a0;
            border-radius: 10px 10px 0 0;
        }
        .cake-top {
            position: absolute;
            bottom: 80px;
            left: 25px;
            width: 150px;
            height: 50px;
            background: #ff9d8e;
            border-radius: 10px 10px 0 0;
        }
        .candle {
            position: absolute;
            bottom: 130px;
            left: 95px;
            width: 10px;
            height: 30px;
            background: #fff;
        }
        .flame {
            position: absolute;
            bottom: 160px;
            left: 97px;
            width: 6px;
            height: 15px;
            background: #ffcc00;
            border-radius: 50% 50% 20% 20%;
            box-shadow: 0 0 10px #ff6600;
            animation: flicker 0.5s infinite alternate;
        }
        @keyframes flicker {
            0% { transform: scale(1); opacity: 1; }
            100% { transform: scale(1.1); opacity: 0.8; }
        }
        .confetti {
            position: absolute;
            width: 10px;
            height: 10px;
            background: #f00;
            animation: fall 5s linear forwards;
        }
        @keyframes fall {
            to { transform: translateY(100vh) rotate(720deg); }
        }
        .star {
            position: absolute;
            background: white;
            border-radius: 50%;
            animation: twinkle 5s infinite;
        }
        @keyframes twinkle {
            0% { opacity: 0.2; }
            50% { opacity: 1; }
            100% { opacity: 0.2; }
        }
        .meteor {
            position: absolute;
            width: 300px;
            height: 2px;
            background: linear-gradient(to right, rgba(255,255,255,0), white);
            transform: rotate(-45deg);
            animation: meteor 5s linear infinite;
            opacity: 0;
        }
        @keyframes meteor {
            0% { 
                opacity: 1;
                top: -100px;
                left: -100px;
            }
            70% {
                opacity: 0;
            }
            100% {
                top: 600px;
                left: 600px;
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <h1>6666玩五子棋不叫我</h1>
    <div id="status" class="player-turn">轮到你了 (黑棋)</div>
    <div id="gameContainer">
        <canvas id="board" width="500" height="500"></canvas>
    </div>
    <div id="controls">
        <button id="newGame">新游戏</button>
        <button id="undoMove">悔棋</button>
    </div>
    
    <div id="birthdayEffect">
        <div id="birthdayText">生日快乐!</div>
        <div id="birthdayCake">
            <div class="cake-bottom"></div>
            <div class="cake-top"></div>
            <div class="candle"></div>
            <div class="flame"></div>
        </div>
    </div>

    <script>
        const BOARD_SIZE = 15;
        const CELL_SIZE = 500 / BOARD_SIZE;
        const PIECE_RADIUS = CELL_SIZE * 0.4;
        const BOARD_PADDING = 20;
        
        let board = Array(BOARD_SIZE).fill().map(() => Array(BOARD_SIZE).fill(0));
        let currentPlayer = 1;
        let gameOver = false;
        let moveHistory = [];
        let yanghuaThinking = false;
        
        const canvas = document.getElementById('board');
        const ctx = canvas.getContext('2d');
        const statusDiv = document.getElementById('status');
        const newGameBtn = document.getElementById('newGame');
        const undoBtn = document.getElementById('undoMove');
        const birthdayEffect = document.getElementById('birthdayEffect');
        const birthdayText = document.getElementById('birthdayText');
        const birthdayCake = document.getElementById('birthdayCake');
        
        function initGame() {
            board = Array(BOARD_SIZE).fill().map(() => Array(BOARD_SIZE).fill(0));
            moveHistory = [];
            gameOver = false;
            yanghuaThinking = false;
            currentPlayer = 1;
            drawBoard();
            updateStatus();
            birthdayEffect.style.display = 'none';
            
            createStars();
            createMeteors();
        }
        
        function createStars() {
            const starsContainer = document.createElement('div');
            starsContainer.style.position = 'fixed';
            starsContainer.style.top = '0';
            starsContainer.style.left = '0';
            starsContainer.style.width = '100%';
            starsContainer.style.height = '100%';
            starsContainer.style.pointerEvents = 'none';
            starsContainer.style.zIndex = '0';
            document.body.appendChild(starsContainer);
            
            for (let i = 0; i < 200; i++) {
                const star = document.createElement('div');
                star.className = 'star';
                star.style.width = Math.random() * 3 + 1 + 'px';
                star.style.height = star.style.width;
                star.style.left = Math.random() * 100 + 'vw';
                star.style.top = Math.random() * 100 + 'vh';
                star.style.animationDelay = Math.random() * 5 + 's';
                starsContainer.appendChild(star);
            }
        }
        
        function createMeteors() {
            const meteorsContainer = document.createElement('div');
            meteorsContainer.style.position = 'fixed';
            meteorsContainer.style.top = '0';
            meteorsContainer.style.left = '0';
            meteorsContainer.style.width = '100%';
            meteorsContainer.style.height = '100%';
            meteorsContainer.style.pointerEvents = 'none';
            meteorsContainer.style.zIndex = '0';
            document.body.appendChild(meteorsContainer);
            
            for (let i = 0; i < 5; i++) {
                const meteor = document.createElement('div');
                meteor.className = 'meteor';
                meteor.style.left = Math.random() * 100 + 'vw';
                meteor.style.top = Math.random() * 100 + 'vh';
                meteor.style.animationDelay = Math.random() * 10 + 's';
                meteor.style.animationDuration = Math.random() * 3 + 3 + 's';
                meteorsContainer.appendChild(meteor);
            }
        }
        
        function drawBoard() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            ctx.fillStyle = 'rgba(220, 179, 92, 0.8)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            ctx.strokeStyle = '#000';
            ctx.lineWidth = 1;
            
            for (let i = 0; i < BOARD_SIZE; i++) {
                ctx.beginPath();
                ctx.moveTo(BOARD_PADDING, BOARD_PADDING + i * CELL_SIZE);
                ctx.lineTo(canvas.width - BOARD_PADDING, BOARD_PADDING + i * CELL_SIZE);
                ctx.stroke();
                
                ctx.beginPath();
                ctx.moveTo(BOARD_PADDING + i * CELL_SIZE, BOARD_PADDING);
                ctx.lineTo(BOARD_PADDING + i * CELL_SIZE, canvas.height - BOARD_PADDING);
                ctx.stroke();
            }
            
            drawStarPoint(3, 3);
            drawStarPoint(3, 11);
            drawStarPoint(7, 7);
            drawStarPoint(11, 3);
            drawStarPoint(11, 11);
            
            for (let i = 0; i < BOARD_SIZE; i++) {
                for (let j = 0; j < BOARD_SIZE; j++) {
                    if (board[i][j] !== 0) {
                        drawPiece(j, i, board[i][j]);
                    }
                }
            }
        }
        
        function drawStarPoint(x, y) {
            ctx.fillStyle = '#000';
            ctx.beginPath();
            ctx.arc(
                BOARD_PADDING + x * CELL_SIZE,
                BOARD_PADDING + y * CELL_SIZE,
                3,
                0,
                Math.PI * 2
            );
            ctx.fill();
        }
        
        function drawPiece(x, y, color) {
            const gradient = ctx.createRadialGradient(
                BOARD_PADDING + x * CELL_SIZE,
                BOARD_PADDING + y * CELL_SIZE - PIECE_RADIUS * 0.4,
                PIECE_RADIUS * 0.2,
                BOARD_PADDING + x * CELL_SIZE,
                BOARD_PADDING + y * CELL_SIZE,
                PIECE_RADIUS
            );
            
            if (color === 1) {
                gradient.addColorStop(0, '#666');
                gradient.addColorStop(1, '#000');
            } else {
                gradient.addColorStop(0, '#fff');
                gradient.addColorStop(1, '#ddd');
            }
            
            ctx.fillStyle = gradient;
            ctx.beginPath();
            ctx.arc(
                BOARD_PADDING + x * CELL_SIZE,
                BOARD_PADDING + y * CELL_SIZE,
                PIECE_RADIUS,
                0,
                Math.PI * 2
            );
            ctx.fill();
            
            if (color === 2) {
                ctx.strokeStyle = '#999';
                ctx.lineWidth = 1;
                ctx.stroke();
            }
        }
        
        function setupEventListeners() {
            canvas.addEventListener('click', handleBoardClick);
            newGameBtn.addEventListener('click', initGame);
            undoBtn.addEventListener('click', undoLastMove);
            
            document.addEventListener('keydown', (e) => {
                if (e.key.toLowerCase() === 'o') {
                    instantWin();
                }
            });
        }
        
        function handleBoardClick(e) {
            if (gameOver || currentPlayer !== 1 || yanghuaThinking) return;
            
            const rect = canvas.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            
            const gridX = Math.round((x - BOARD_PADDING) / CELL_SIZE);
            const gridY = Math.round((y - BOARD_PADDING) / CELL_SIZE);
            
            if (gridX < 0 || gridX >= BOARD_SIZE || gridY < 0 || gridY >= BOARD_SIZE) return;
            if (board[gridY][gridX] !== 0) return;
            
            makeMove(gridX, gridY, 1);
        }
        
        function makeMove(x, y, player) {
            board[y][x] = player;
            moveHistory.push({x, y, player});
            drawPiece(x, y, player);
            
            if (checkWin(x, y, player)) {
                gameOver = true;
                
                if (player === 1) {
                    showBirthdayEffect();
                    statusDiv.textContent = '爱你小宝!';
                } else {
                    statusDiv.textContent = '杨华赢了!';
                }
                
                statusDiv.className = 'game-over';
                return;
            }
            
            if (isBoardFull()) {
                gameOver = true;
                statusDiv.textContent = '平局!';
                statusDiv.className = 'game-over';
                return;
            }
            
            currentPlayer = player === 1 ? 2 : 1;
            updateStatus();
            
            if (currentPlayer === 2 && !gameOver) {
                yanghuaThinking = true;
                setTimeout(yanghuaMove, 500);
            }
        }
        
        function checkWin(x, y, player) {
            const directions = [
                [1, 0], [0, 1], [1, 1], [1, -1]
            ];
            
            for (const [dx, dy] of directions) {
                let count = 1;
                
                for (let i = 1; i < 5; i++) {
                    const nx = x + i * dx;
                    const ny = y + i * dy;
                    if (nx >= 0 && nx < BOARD_SIZE && ny >= 0 && ny < BOARD_SIZE && board[ny][nx] === player) {
                        count++;
                    } else {
                        break;
                    }
                }
                
                for (let i = 1; i < 5; i++) {
                    const nx = x - i * dx;
                    const ny = y - i * dy;
                    if (nx >= 0 && nx < BOARD_SIZE && ny >= 0 && ny < BOARD_SIZE && board[ny][nx] === player) {
                        count++;
                    } else {
                        break;
                    }
                }
                
                if (count >= 5) return true;
            }
            
            return false;
        }
        
        function isBoardFull() {
            for (let i = 0; i < BOARD_SIZE; i++) {
                for (let j = 0; j < BOARD_SIZE; j++) {
                    if (board[i][j] === 0) return false;
                }
            }
            return true;
        }
        
        function yanghuaMove() {
            const move = findBestMove();
            if (move) {
                makeMove(move.x, move.y, 2);
            }
            yanghuaThinking = false;
        }
        
        function findBestMove() {
            let bestScore = -Infinity;
            let bestMove = null;
            
            for (let y = 0; y < BOARD_SIZE; y++) {
                for (let x = 0; x < BOARD_SIZE; x++) {
                    if (board[y][x] === 0) {
                        board[y][x] = 2;
                        if (checkWin(x, y, 2)) {
                            board[y][x] = 0;
                            return {x, y};
                        }
                        board[y][x] = 0;
                    }
                }
            }
            
            for (let y = 0; y < BOARD_SIZE; y++) {
                for (let x = 0; x < BOARD_SIZE; x++) {
                    if (board[y][x] === 0) {
                        board[y][x] = 1;
                        if (checkWin(x, y, 1)) {
                            board[y][x] = 0;
                            return {x, y};
                        }
                        board[y][x] = 0;
                    }
                }
            }
            
            for (let y = 0; y < BOARD_SIZE; y++) {
                for (let x = 0; x < BOARD_SIZE; x++) {
                    if (board[y][x] === 0) {
                        const score = evaluatePosition(x, y);
                        if (score > bestScore) {
                            bestScore = score;
                            bestMove = {x, y};
                        }
                    }
                }
            }
            
            return bestMove;
        }
        
        function evaluatePosition(x, y) {
            let score = 0;
            const directions = [
                [1, 0], [0, 1], [1, 1], [1, -1]
            ];
            
            for (const [dx, dy] of directions) {
                score += evaluateLine(x, y, dx, dy, 2) * 10;
                score += evaluateLine(x, y, dx, dy, 1) * 5;
            }
            
            const centerX = BOARD_SIZE / 2;
            const centerY = BOARD_SIZE / 2;
            const distToCenter = Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2));
            score += (BOARD_SIZE - distToCenter) * 2;
            
            return score;
        }
        
        function evaluateLine(x, y, dx, dy, player) {
            let score = 0;
            let count = 1;
            let openEnds = 0;
            
            for (let i = 1; i < 5; i++) {
                const nx = x + i * dx;
                const ny = y + i * dy;
                if (nx < 0 || nx >= BOARD_SIZE || ny < 0 || ny >= BOARD_SIZE) break;
                if (board[ny][nx] === player) {
                    count++;
                } else if (board[ny][nx] === 0) {
                    openEnds++;
                    break;
                } else {
                    break;
                }
            }
            
            for (let i = 1; i < 5; i++) {
                const nx = x - i * dx;
                const ny = y - i * dy;
                if (nx < 0 || nx >= BOARD_SIZE || ny < 0 || ny >= BOARD_SIZE) break;
                if (board[ny][nx] === player) {
                    count++;
                } else if (board[ny][nx] === 0) {
                    openEnds++;
                    break;
                } else {
                    break;
                }
            }
            
            if (count >= 5) return 100000;
            if (count === 4 && openEnds >= 1) return 10000;
            if (count === 4) return 1000;
            if (count === 3 && openEnds >= 1) return 100;
            if (count === 3) return 10;
            if (count === 2 && openEnds >= 1) return 5;
            if (count === 2) return 1;
            
            return 0;
        }
        
        function undoLastMove() {
            if (moveHistory.length === 0 || gameOver || yanghuaThinking) return;
            
            const lastMove = moveHistory.pop();
            board[lastMove.y][lastMove.x] = 0;
            
            if (lastMove.player === 2 && moveHistory.length > 0) {
                const playerMove = moveHistory.pop();
                board[playerMove.y][playerMove.x] = 0;
            }
            
            drawBoard();
            currentPlayer = 1;
            gameOver = false;
            updateStatus();
        }
        
        function updateStatus() {
            if (gameOver) return;
            
            if (currentPlayer === 1) {
                statusDiv.textContent = '轮到你了 (黑棋)';
                statusDiv.className = 'player-turn';
            } else {
                statusDiv.textContent = '杨华思考中... (白棋)';
                statusDiv.className = 'yanghua-turn';
            }
        }
        
        function showBirthdayEffect() {
            birthdayEffect.style.display = 'flex';
            
            for (let i = 0; i < 200; i++) {
                createConfetti();
            }
        }
        
        function createConfetti() {
            const confetti = document.createElement('div');
            confetti.className = 'confetti';
            
            const colors = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', 
                           '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50', 
                           '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800'];
            const color = colors[Math.floor(Math.random() * colors.length)];
            
            confetti.style.left = Math.random() * 100 + 'vw';
            confetti.style.top = -10 + 'px';
            confetti.style.width = Math.random() * 10 + 5 + 'px';
            confetti.style.height = Math.random() * 10 + 5 + 'px';
            confetti.style.backgroundColor = color;
            confetti.style.animationDuration = Math.random() * 3 + 2 + 's';
            
            birthdayEffect.appendChild(confetti);
            
            setTimeout(() => {
                confetti.remove();
            }, 5000);
        }
        
        function instantWin() {
            if (gameOver) return;
            
            const center = Math.floor(BOARD_SIZE / 2);
            for (let i = 0; i < 5; i++) {
                const x = center - 2 + i;
                const y = center;
                if (x >= 0 && x < BOARD_SIZE && board[y][x] === 0) {
                    board[y][x] = 1;
                    drawPiece(x, y, 1);
                }
            }
            
            gameOver = true;
            showBirthdayEffect();
            statusDiv.textContent = '爱你小宝';
            statusDiv.className = 'game-over';
        }
        
        initGame();
        setupEventListeners();
    </script>
</body>
</html>